﻿
<!-- 
News Framework
(C) Tanzim Saqib. Oct 25, 2010.
http://TanzimSaqib.com | http://newsfx.codeplex.com
-->
    
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" xmlns:fx="clr-namespace:TanzimSaqib.NewsFramework;assembly=TanzimSaqib.NewsFramework" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" x:Class="TanzimSaqib.NewsFramework.MainPanorama"
    mc:Ignorable="d" 
    fx:Command.Attach="Loaded=MainPanorama_Load"
    Background="{Binding BackgroundImageSource}"
    d:DesignHeight="480" d:DesignWidth="480">
	<UserControl.Resources>
		<Style x:Key="ListBoxStyle1" TargetType="ListBox">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
			<Setter Property="BorderThickness" Value="0"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBox">
						<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
							<ItemsPresenter CacheMode="BitmapCache"/>
						</ScrollViewer>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PanoramaItemStyle1" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="Latest" FontSize="60" FontFamily="Comic Sans MS" HorizontalAlignment="Left" Margin="107,0,0,24">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PanoramaItemStyle2" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="Categories" FontSize="60" FontFamily="Comic Sans MS" HorizontalAlignment="Left" Margin="77,0,0,24">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PanoramaItemStyle3" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="saved" FontSize="60" FontFamily="Comic Sans MS" Margin="128,0,134,24" d:LayoutOverrides="Width">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PanoramaItemStyle4" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="Search" FontSize="60" FontFamily="Comic Sans MS" Margin="111,0,109,24" d:LayoutOverrides="Width">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="PanoramaItemStyle5" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="Beauty News" FontSize="60" FontFamily="Comic Sans MS" HorizontalAlignment="Left" Margin="36,0,0,24">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

	<UserControl.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</UserControl.FontFamily>
	<UserControl.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</UserControl.FontSize>
	<UserControl.Foreground>
		<ImageBrush Stretch="Fill"/>
	</UserControl.Foreground>

    <UserControl.DataContext>
        <fx:MainPanoramaViewModel />
    </UserControl.DataContext>

    <controls:Panorama fx:Command.Attach="Loaded=LoadPanorama">
    	<controls:Panorama.Background>
    		<ImageBrush ImageSource="/Views/ll.jpg" Stretch="Fill"/>
    	</controls:Panorama.Background>

        <controls:Panorama.Title>
            <StackPanel Orientation="Horizontal" Margin="0,80,0,0">
                <Image x:Name="icon" Source="/ApplicationIcon.png" Height="51" Width="51" Margin="0,0,10,0"/>
                <TextBlock Text="{Binding PageTitle}" FontStyle="Italic" FontFamily="Segoe WP Bold" FontSize="20" VerticalAlignment="Center"/>
            </StackPanel>
        </controls:Panorama.Title>

<!--Panorama item two--><!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
        <controls:PanoramaItem Style="{StaticResource PanoramaItemStyle1}">
            <controls:PanoramaItem.Header>
                 <TextBlock Text="{Binding PanoramaLatestHeader, Mode=OneWay}" FontFamily="Segoe WP Semibold"  FontSize="40" VerticalAlignment="Center"/>
            </controls:PanoramaItem.Header>
            <!--Double line list with image placeholder and text wrapping-->
             <ListBox ItemsSource="{Binding  Latest}" fx:Command.Attach="SelectionChanged=Latest_SelectionChanged" Background="#4C191919" Margin="21,-2,-22,0">
             	<ListBox.Foreground>
             		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
             			<GradientStop Color="Black" Offset="0"/>
             			<GradientStop Color="White" Offset="1"/>
             		</LinearGradientBrush>
             	</ListBox.Foreground>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,30" Width="450">
                            <!--Replace rectangle with image-->
                            <Image Source="{Binding LineTwo}" Height="100" Width="100" />
                            <!-- <Rectangle Height="100" Width="100" Fill="#FFE5001b" /> -->
                            <StackPanel Width="340">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle3Style}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>

        <!--Panorama item one-->
        <controls:PanoramaItem Style="{StaticResource PanoramaItemStyle2}">
            <controls:PanoramaItem.Header>
                <TextBlock Text="   Categories" FontFamily="Segoe WP Semibold"  FontSize="40" VerticalAlignment="Center"/>
            </controls:PanoramaItem.Header>
            <!--Double line list with text wrapping-->
            <ListBox Margin="29,0,-13,0" ItemsSource="{Binding Categories}" fx:Command.Attach="SelectionChanged=Categories_SelectionChanged" Style="{StaticResource ListBoxStyle1}" Background="#4C191919">
            	<ListBox.Foreground>
            		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            			<GradientStop Color="Black" Offset="0"/>
            			<GradientStop Color="#33191919" Offset="1"/>
            		</LinearGradientBrush>
            	</ListBox.Foreground>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="150" Margin="0,0,0,17" Width="432">
                        	<Grid.ColumnDefinitions>
                        		<ColumnDefinition Width="0.312*"/>
                        		<ColumnDefinition Width="0.688*"/>
                        	</Grid.ColumnDefinitions>
                        	<Image Source="{Binding LineFour}" Margin="8,8,8,0" Height="130" VerticalAlignment="Top"/>
                        	<StackPanel Orientation="Vertical" VerticalAlignment="Top" Height="150" Grid.Column="1">
                        		<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" Margin="0"/>
                        		<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        	</StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>

        <controls:PanoramaItem Style="{StaticResource PanoramaItemStyle3}">
            <controls:PanoramaItem.Header>
                <TextBlock Text="  Saved" FontFamily="Segoe WP Semibold"  FontSize="40" VerticalAlignment="Center"/>
            </controls:PanoramaItem.Header>
            <!--Double line list with image placeholder and text wrapping-->
            <ListBox Margin="11,0,-8,0" ItemsSource="{Binding Saved}" fx:Command.Attach="SelectionChanged=Saved_SelectionChanged" Background="#4C191919">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,30" Width="450">
                            <!--Replace rectangle with image-->
                            <Image Source="{Binding LineTwo}" Height="100" Width="100" />
                            <!-- <Rectangle Height="100" Width="100" Fill="#FFE5001b" /> -->
                            <StackPanel Width="340">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle3Style}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>

        <controls:PanoramaItem Style="{StaticResource PanoramaItemStyle4}">
            <controls:PanoramaItem.Header>
                <TextBlock Text="  Search" FontFamily="Segoe WP Semibold"  FontSize="40" VerticalAlignment="Center"/>
            </controls:PanoramaItem.Header>
            <!--Double line list with text wrapping-->
            <StackPanel Background="#4C191919" Margin="11,0,-5,0">
                <TextBox Text="{Binding SearchText}" fx:Command.Attach="TextChanged=SearchText_TextChanged" Style="{StaticResource TextBoxStyle1}" />
                <Button Content="Search" fx:Command.Attach="Click=Search_Click" IsEnabled="{Binding CanSearch}" />
            </StackPanel>
        </controls:PanoramaItem>

    	<controls:PanoramaItem Style="{StaticResource PanoramaItemStyle5}">
    		<controls:PanoramaItem.Header>
    			<TextBlock Text=" Beauty News" FontFamily="Segoe WP Semibold"  FontSize="40" VerticalAlignment="Center"/>
    		</controls:PanoramaItem.Header>
    		<StackPanel Background="#4C191919" Margin="11,0,-6,0">
    			<TextBlock TextWrapping="Wrap"><Run Text="   "/><Run FontSize="24" Text="           www.beautyhigh.com"/></TextBlock>
    			<phone:WebBrowser x:Name="webcamera" Height="615"/>
    		</StackPanel>
        	
            
                
    	</controls:PanoramaItem>

    </controls:Panorama>

<!--Panorama-based applications should not show an ApplicationBar-->

</UserControl>
